<template>
    <div>
        <el-dialog
            title="发票"
            width="60%"
            :visible.sync="showDialog"
            @close="closeBox"
            :modal-append-to-body="false"
        >
            <!-- <img src="./2222de.png" alt=""> -->
            <div class="flexContiner" :class="isIEBrowser() ? 'ieClass' : ''">
                <div class="info">
                    <div class="infoTitle" style="margin-bottom: 10px">
                        <div>
                            <span
                                style="font-size: 32px !important; color: black"
                            >
                                电子发票
                            </span>
                            <span
                                style="font-size: 32px !important; color: black"
                            >
                                （{{ '铁路电子客票' }}）
                            </span>
                        </div>
                    </div>
                    <div
                        style="
                            display: flex;
                            height: 48px;
                            justify-content: space-between;
                            margin-top: 5px;
                            font-size: 16px !important;
                            color: black;
                        "
                    >
                        <div>
                            <span>发票号码：</span>
                            <span>{{ tdysInfo.fphm }}</span>
                        </div>
                        <div>
                            <span>开票日期：</span>
                            <span>{{ tdysInfo.kprq }}</span>
                        </div>
                    </div>
                </div>
                <!-- 整体发票区域 -->
                <div class="invoice-area">
                    <div class="box1 boxCom">
                        <span>{{ '车次发到站区' || tdysInfo.cccc }}</span>
                    </div>
                    <div class="box2 boxCom">
                        <span>{{ '日期席位区' || tdysInfo.cfsj1 }}</span>
                    </div>
                    <div class="box3 boxCom">
                        <span>{{ '票价信息区' || tdysInfo.yppj }}</span>
                    </div>
                    <div class="box4 boxCom">
                        <span>{{ '税务信息区' || tdysInfo.hjse }}</span>
                    </div>
                    <div class="box5 boxCom">
                        <span>{{ '旅客信息区' || tdysInfo.xm }}</span>
                    </div>

                    <div class="box6 boxCom">
                        <span>{{ '原票信息区' || tdysInfo.ypcfz }}</span>
                    </div>
                    <div class="box7 boxCom">
                        <span>{{ '标识信息区' || tdysInfo.ypcfz }}</span>
                    </div>
                    <div class="box88 boxCom">
                        <el-row>
                            <el-col :span="12">电子客票号：</el-col>
                            <el-col :span="12">原发票号码：</el-col>
                        </el-row>
  
                    </div>

                </div>
            </div>
            <div class="box9">
                        <el-row style="margin-bottom: 10px;">
                            <el-col :span="12">购买方名称：</el-col>
                            <el-col :span="12">统一社会信用代码：</el-col>
                        </el-row>
                        <div class="box9Content">
                            <span>{{ '提示息区' || tdysInfo.ypcfz }}</span>
                        </div>
                    </div>
        </el-dialog>
    </div>
</template>
  <script>
import { getDefBIzdictByLxdm } from '@/api/vmsClassifyCode.js'
import tableList from '@/components/tableList/index.vue'
import isIEBrowser from '@/utils/isIe'

export default {
    name: 'airTransport',
    data() {
        return {
            infoFormData: {
                fphm: '',
                sfwzzfp: '',
                kprq: '',
                kjhzfpdydlzfphm: '',
                fppzDm: '',
                tdyslxDm: '',
                gmfnsrsbh: '',
                gmfmc: '',
                gmfdz: '',
                gmflxdh: '',
                xsfnsrsbh: '',
                xsfmc: '',
                xsfdz: '',
                xsflxdh: '',
                gmfjbr: '',
                jbrsfzjhm: '',
                jbrlxdh: '',
                kpr: '',
                skr: '',
                fhr: '',
                jshj: '',
                shjdx: '',
                jsfsDm: '',
                hjje: '',
                hjse: '',
                kprsrrzdzxx: '',
                sjkpdzxx: '',
                htbh: '',
                nsywfssj: '',
                jbrsfzjzlDm: '',
                sflzfpbz: '',
                zzsjzjtDm: '',
                bz: '',
                spsl: '',
                cktslDm: '',
                hwxx: [],
                tdys: {
                    fphm: '',
                    gngjbz: '',
                    gpdh: '',
                    sflzfpbz: '',
                    xm: '',
                    zjhm: '',
                    qz: '',
                    dzkphm: '',
                    yzm: '',
                    tsxx: '',
                    bxf: '',
                    xswddh: '',
                    tkdw: '',
                    kprq: '',
                    xsfmc: '',
                    xsfnsrsbh: '',
                    gmfmc: '',
                    gmfnsrsbh: '',
                    tdysmx: [],
                },
            },
            tdysInfo: {},
            keySet: [
                {
                    label: '承运人',
                    englishName: 'cyr',
                },
                {
                    label: '航班号',
                    englishName: 'hbh',
                },
                {
                    label: '座位等级',
                    englishName: 'zwdj',
                    width: 'labelWidth',
                },
                {
                    label: '日期',
                    englishName: 'cyrq',
                    // width: 'labelWidth',
                    // isSlot: true,
                    // slotName: 'ykjhzfpbz',
                },

                {
                    label: '时间',
                    englishName: 'qfsj',
                },
                {
                    label: '客票级别/客票类别',
                    englishName: 'kpjbkplb',
                },
                {
                    label: '客票生效日期',
                    englishName: 'kpsxrq',
                },

                {
                    label: '有效截止日期',
                    englishName: 'yxjzrq',
                },

                {
                    label: '免费行李',
                    englishName: 'mfxle',
                },
            ],
            showDialog: false,
            listDetails: [
                {
                    cyr: '刘传健',
                    hbh: '川航8633',
                    zwdj: '驾驶舱',
                    cyrq: '2018年5月14日',
                    qfsj: '07:46',
                    kpjbkplb: 'A',
                    kpsxrq: '2018年5月14日',
                    yxjzrq: '2018年5月15日',
                    mfxle: '无',
                },
            ],
        }
    },
    created() {},
    methods: {
        isIEBrowser() {
            return isIEBrowser()
        },
        getDict() {
            // getDefBIzdictByLxdm({
            //     lxdm: 'VMS_TDYSBQGL',
            // }).then(
            //     ({ data }) => {
            //         if (Array.isArray(data)) {
            //             this.tedingyaosuSelect = data.filter((item) => {
            //                 return item.lxxdm == '05' || item.lxxdm == '06'
            //             })
            //         } else {
            //             this.tedingyaosuSelect = []
            //         }
            //     },
            //     (err) => {}
            // )
        },

        resetData() {
            // 整体表单
            this.infoFormData = {}
        },

        emptyUtil(val) {
            if (
                typeof val === 'undefined' ||
                val === '' ||
                val === null ||
                val === 0
            ) {
                return true
            } else {
                return false
            }
        },

        closeBox() {
            this.showDialog = false
        },
        detailCopy(d) {
            this.infoFormData = d
            this.tdysInfo = d.tdys
        },
        show(row) {
            this.resetData()
            setTimeout(() => {
                this.detailCopy({
                    fphm: '发票号码',
                    sfwzzfp: '是否为纸质发票',
                    kprq: '开票日期',
                    kjhzfpdydlzfphm: '开具红字发票对应的蓝字发票号码',
                    fppzDm: '发票票种代码',
                    tdyslxDm: '特定要素类型代码',
                    gmfnsrsbh: '购买方纳税人识别号',
                    gmfmc: '购买方名称',
                    gmfdz: '购买方地址',
                    gmflxdh: '购买方联系电话',
                    xsfnsrsbh: '销售方纳税人识别号',
                    xsfmc: '销售方名称',
                    xsfdz: '销售方地址',
                    xsflxdh: '销售方联系电话',
                    gmfjbr: '购买方经办人',
                    jbrsfzjhm: '经办人身份证件号码',
                    jbrlxdh: '经办人联系电话',
                    kpr: '开票人',
                    skr: '收款人',
                    fhr: '付汇人',
                    jshj: '价税合计',
                    jshjdx: '价税合计（大写）',
                    jsfsDm: '结算方式代码',
                    hjje: '合计金额（合计不含税金额）',
                    hjse: '合计税额',
                    kprsrrzdzxx: '开票人实人认证地址信息',
                    sjkpdzxx: '手机开票地址信息',
                    htbh: '合同编号',
                    nsywfssj: '纳税义务发生时间',
                    jbrsfzjzlDm: '经办人身份证件种类',
                    sflzfpbz: '是否蓝字发票标志',
                    zzsjzjtDm: '增值税即征即退代码',
                    bz: '备注',
                    spsl: '商品数量',
                    cktslDm: '出口退税类代码',
                    hwxx: [],
                    tdys: {
                        fphm: '发票号码',
                        kprq: '2024年4月29日',
                        ywlxmc: '业务类型名称',
                        cfz: '出发站',
                        cfzpy: '出发站拼音',
                        ddz: '到达站',
                        ddzpy: '到达站拼音',
                        cccc: '乘车车次',
                        rq: '日期',
                        cfsj1: '出发时间',
                        tldzkppzmc: '铁路电子客票票种名称',
                        kttz: '空调特征',
                        xb1: '席别',
                        cx: '车厢',
                        xw: '席位',
                        zfje: '支付金额',
                        ytje: '已退金额',
                        yppj: '原票票价',
                        ypcfz: '原票出发站',
                        ypddz: '原票到达站',
                        dzkph: '电子客票号',
                        zjhm: '证件号码',
                        xm: '姓名',
                        tlkpyhlx: '铁路客票优惠类型',
                        yfphm: '原发票号码',
                    },
                })
                this.showDialog = true
            }, 200)
        },
    },
    components: {
        tableList,
    },
}
</script>
  <style lang="scss" scoped>
$InvoiceBorderColor: black;
.flexContiner {
    overflow: auto;
    // height: 90vh;
    background-color: #dbf1f5;
        padding: 20px;
        padding-top: 0px;
    .infoTitle {
        display: flex;
        justify-content: center;
    }
    .boxCom{

    }
    .box1 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        border: 1px dashed $InvoiceBorderColor;
        height: 80px;
        
    }
    .box2 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        border: 1px dashed $InvoiceBorderColor;
        margin: 6px 0;
        height: 50px;
    }
    .box3 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        border: 1px dashed $InvoiceBorderColor;
        height: 50px;
    }
    .box4 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        border: 1px dashed $InvoiceBorderColor;
        height: 50px;
        margin: 6px 0;
    }
    .box5 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        border: 1px dashed $InvoiceBorderColor;
        height: 50px;
    }

    .box6 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        border: 1px dashed $InvoiceBorderColor;
        height: 50px;
        margin: 6px 0;
    }
    .box7 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        border: 1px dashed $InvoiceBorderColor;
        height: 50px;
    }
    .box88 {
        width: 100%;
        margin-top: 6px;
    }

}
.box9 {
        width: 100%;
        background-color: #a1dce9;
        padding: 20px;
        .box9Content{
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px dashed $InvoiceBorderColor;
            height: 80px;
        }
    }

.ieClass {
    padding-bottom: 20px;
}
.invoice-area {
    position: relative;
    min-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

::v-deep .el-dialog__header {
    background-color: #dbf1f5;
}
::v-deep .el-dialog__body {
    padding: 0px;
    background-color: #dbf1f5;
}
</style>
  